<template>
  <div>
    <el-row>
      <div>
        <div style="display: inline-block">
          <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                     @click="$router.go(-1)">返回
          </el-button>
        </div>
        <div style="display: inline-block">|</div>
        <div style="display: inline-block;">
          <div style="padding-bottom: 15px;margin-left:10px">
            <span style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">详情</span>
          </div>
        </div>
        <div style="border-bottom: solid 1px #C9C9C9;"></div>
      </div>
    </el-row>
    <el-row class="bottom-space" style="margin-top: 10px;">
      <el-col>
      <div>
        <div style="width: 430px; float: right">
          <el-input v-model="exerciseGroup.caseAlias" placeholder="请输入试题相关材料" @keyup.enter.native="advanceConfirm">
            <i class="el-input__icon el-icon-search" slot="prefix"></i>
            <el-button :icon="appendIcon" slot="append" v-on:click="switchAppend"></el-button>
          </el-input>
        </div>
        <div id="advance" style="padding: 10px;float: right" v-if="showAdvance">
          <div class="block" style="margin-top: 10px">
            <div style="width: 100px;display: inline-block;text-align: right">试题类型</div>
            <div style="display: inline-block">
              <el-select clearable size="small"
                         placeholder="请选择"
                         v-model="exerciseGroup.role"
                         style="width: 300px;">
                <el-option
                  v-for="item in CONST.EXERCISE_GROUP_ROLE_ARRAY"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </div>
          </div>

          <div style="margin-top: 10px">
            <div style="width: 100px;text-align:right; display: inline-block">
              <span>所属章节</span>
            </div>
            <div style="display: inline-block">
              <el-input size="small" style="width: 300px;margin-top: 10px"
                        v-model="exerciseGroup.classify"></el-input>
            </div>
          </div>

          <div style="margin-top: 10px">
            <el-row>
              <el-col :offset="6" :span="6">
                <div style="margin-left: 90px;height: 32px; width: 88px;">
                  <el-button size="small" v-on:click="showAdvance = false">取 消</el-button>
                </div>
              </el-col>
              <el-col :offset="2" :span="2">
                <div style="margin-left: 30px;height: 32px; width: 88px;">
                  <el-button size="small" v-on:click="reset">重置</el-button>
                </div>
              </el-col>
              <el-col :offset="2" :span="2">
                <div div style="margin-left: 30px;height: 32px; width: 88px;">
                  <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-col>

    </el-row>
    <el-row>
      <el-table :data="tableData" border stripe :height="tableHeight">
        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
        <el-table-column label="所属章节" min-width="100" prop="classify"></el-table-column>
        <el-table-column label="题型" width="100" prop="role"></el-table-column>
        <el-table-column label="题干" min-width="200" prop="caseAlias">
          <template slot-scope="scope">
            <div v-html="scope.row.caseAlias"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <span><el-link type="primary"
                             @click.prevent="previewExerciseGroup(scope.row)">详情</el-link></span>
            <span><el-link v-if="$store.state.book.status === 0" type="primary"
                           @click.prevent="editExerciseGroup(scope.row)">编辑</el-link></span>
            <span><el-link type="danger"
                             @click.prevent="deleteExerciseGroup(scope.row)">删除</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div>
        <el-pagination
          :total="totalNum"
          :page-size.sync="exerciseGroup.pageSize"
          :current-page.sync="exerciseGroup.currentPage"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          @current-change="selectExerciseGroupPage"
          @size-change="selectExerciseGroupPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right;"></el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ExerciseGroupTable",
  data() {
    return {
      exerciseGroup: {
        caseAlias: '',
        currentPage: 1, // 第几页
        pageSize: 10, // 每页显示的数据个数
      },
      tableHeight: CONST.WORKSPACE_HEIGHT - 140,
      tableData: [],
      totalNum: 0,
      showAdvance: false,
      appendIcon: "el-icon-caret-bottom",
    }
  },
  methods: {
    previewExerciseGroup(exerciseGroup) {
      this.axios.get('pmph/action/exerciseBook/selectExerciseEntryListByGroupId?exerciseGroupId=' + exerciseGroup.id)
      .then((response) => {
        exerciseGroup.exerciseEntryList = response.data
        this.$store.commit('showExerciseGroupDrawer', exerciseGroup)
      })
    },
    editExerciseGroup(exerciseGroup) {
      this.axios.get('pmph/action/exerciseBook/selectExerciseEntryListByGroupId?exerciseGroupId=' + exerciseGroup.id)
      .then((response) => {
        exerciseGroup.exerciseEntryList = response.data
        this.$store.commit('setExerciseGroup', exerciseGroup)
        this.$router.push('/exerciseBook/editExerciseGroup')
      })
    },
    deleteExerciseGroup(exerciseGroup) {
      this.$confirm('确认删除本题？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post('pmph/action/exerciseBook/deleteExerciseGroup', exerciseGroup)
          .then(this.selectExerciseGroupPage)
      }, UTIL.emptyFun)
    },
    advanceConfirm: function () {
      this.exerciseGroup.currentPage = 1;
      this.selectExerciseGroupPage();
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    advanceCancel: function () {
      this.showAdvance = false;
    },
    reset: function () {
      this.exerciseGroup.caseAlias = ''
      this.exerciseGroup.role = ''
    },
    selectExerciseGroupPage() {
      this.axios.get('/pmph/action/exerciseBook/selectExerciseGroupPage', {
        params: this.exerciseGroup
      }).then((response) => {
        this.tableData = response.data.records;
        this.totalNum = response.data.total;
        this.showAdvance = false
      })
    },
  },
  created() {
    this.exerciseGroup.exerciseBookId = this.$store.state.book.id
    this.selectExerciseGroupPage();
  }
}
</script>

<style scoped>

</style>
